import React, { useEffect, useRef, useState } from "react";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GC from "@grapecity/spread-sheets";
import { Designer } from "@grapecity/spread-sheets-designer-react";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import { Button } from "antd";
import "antd/dist/antd.css";
import template from "./template.json";
import data from "./data";

GC.Spread.Common.CultureManager.culture("zh-cn");
export default () => {
  const ss = useRef();

  useEffect(() => {
    // ss.current.designer.setData("treeNodeFromJson", JSON.stringify(template));
    const spread = ss.current.designer.getWorkbook();
    spread.suspendPaint();
    spread.fromJSON(data);
    spread.resumePaint();
  }, []);

  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          const person = {
            姓名: "张三",
            年龄: 30,
            生日: "1986.2.23",
            简历: [
              {
                单位: "华为",
                工龄: 20,
              },
              {
                单位: "华为",
                工龄: 20,
              },
              {
                单位: "华为",
                工龄: 20,
              },
            ],
          };
          const spread = ss.current.designer.getWorkbook();
          spread.suspendPaint();
          let sheet = spread.sheets[0];
          const ds = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
          sheet.setDataSource(ds);
          spread.resumePaint();
        }}
      >
        绑定数据
      </Button>
      <Designer styleInfo={{ width: "100%", height: "900px" }} ref={ss} />
    </>
  );
};
